﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>ol</title>

    <script src='../jquery/jquery.js' type='text/javascript'></script>

    <script src='../jquery/ui.core.js' type='text/javascript'></script>

    <script src='../jquery/jquery.cookie.js' type='text/javascript'></script>

    <script src='../dynatree/jquery.dynatree.js' type='text/javascript'></script>

    <script src="../CodeMirror/js/codemirror.js" type="text/javascript"></script>

    <script src="../CodeMirror/js/codemirror.js" type="text/javascript"></script>

    <script src="../jCSSParser/jcssParser.js" type="text/javascript"></script>

    <link href='../dynatree/skin/ui.dynatree.css' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="../style/editorStyle.css" />

    <script type='text/javascript'>
        $(function() {
            // Attach the dynatree widget to an existing <div id="tree"> element
            // and pass the tree options as an argument to the dynatree() function:
            $("#cssOutline").dynatree({
                onActivate: function(dtnode) {
                    // A DynaTreeNode object is passed to the activation handler
                    // Note: we also get this event, if persistence is on, and the page is reloaded. 
                    alert("You activated " + dtnode.data.title);
                },
                title:"CSS大纲",
                rootVisible: true,
                classNames:
                {
                	container: "ui-dynatree-container"
                },
                children: [
				{ title: "元素", isFolder: true, key: "element",expand:true},
				{ title: "类", isFolder: true, key: "className",expand:true},
				{ title: "ID", isFolder: true, key: "id",expand:true}
			]
            });
        });
    </script>

</head>
<body>
<div id="header"><h1>Ext Layout Browser</h1></div>
<div id="cssOutline" style="width:200px;float:left;overflow:scroll;height:500px">
    </div>
    <div class="editorArea" style="margin-left:210px">
        <textarea id="code" cols="120" rows="30">
/* CSS Document */
.selector
{
	color:red
}
		</textarea>
    </div>

    <script type="text/javascript">

        function x(n, i) {
            var node=$("#cssOutline").dynatree("getTree").getNodeByKey(n.type);
        	node.addChild({title:n.name});
        }
        
        function clearTree()
        {
        	var node=$("#cssOutline").dynatree("getTree").getNodeByKey("element");
        	node.removeChildren();
        	var node=$("#cssOutline").dynatree("getTree").getNodeByKey("className");
        	node.removeChildren();
        	var node=$("#cssOutline").dynatree("getTree").getNodeByKey("id");
        	node.removeChildren();
        }
        
        function onTextChange() {
            var code = this.editor.getCode();
            clearTree();
            var selectors = Wizking.jStyle.funParse(code, x);
        }

        var editor = CodeMirror.fromTextArea('code', {
            height: "450px",
            lineNumbers: true,
            parserfile: "parsecss.js",
            stylesheet: "../CodeMirror/css/csscolors.css",
            path: "../CodeMirror/js/",
            onChange: onTextChange
        });
    </script>

</body>
</html>
